<template>
    <div>
        <header class="header">
            <div class="warp_box">
                <div class="warp">
                    <div class="warp_left">
                        <span class="m_menu" @click="backFun">
                            <img src="../assets/img/phone-productlist7.png" alt />
                        </span>
                    </div>
                    <div class="warp_logo">
                        <img src="../assets/img/logo.webp" alt />
                    </div>
                    <div class="warp_right">
                        <div class="m_tools">
                            <span>
                                <img src="../assets/img/search.png" alt />
                            </span>
                            <span>
                                <img src="../assets/img/shopcar.png" alt />
                            </span>
                            <span>
                                <img src="../assets/img/tongzhi.png" alt />
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <main>
            <p class="title">请选择产品类别</p>
            <ul class="classify">
                <li v-for="(item,index) in classify" :key="index" @click="$router.push({'path':'/productlist',query:{id:item.id}})">{{item.type}}</li>
            </ul>
        </main>
        <FooterTab :key="$route.fullPath"/>
    </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
    mounted() {
        this.getClassify()
    },
    methods:{
        ...mapActions("productclassify",["getClassify"]),
        backFun(){
            this.$router.go(-1)
        }
    },
    computed: {
    ...mapState("productclassify", ["classify"])
    }
};
</script>

<style>
body {
  margin: 0;
}
</style>

<style scoped src="../assets/css/productclassify.css">
</style>